<script setup lang='ts'>
defineOptions({ name: 'AppSportsHomeNavs' })
const props = defineProps<{ currentPage: string }>()

const route = useRoute()
const { width } = useWindowSize()
const sportsStore = useSportsStore()
const { isShowAllSportsList, allSportsNameList } = storeToRefs(sportsStore)
const { headerHeight } = storeToRefs(useWindowStore())

const navRef = ref()

// 当前页面球种id
const si = computed(() => route.query.si?.toString() ?? '0')
// 根据屏幕宽度计算展示几个
const ballCount = computed(() => {
  const base = 332
  const step = 48

  if (width.value < base)
    return 0

  return 1 + Math.floor((width.value - base) / step)
})
const showList = computed(() => {
  if (ballCount.value === 0)
    return []

  // 当前球种在列表中的index
  const activeIndex = allSportsNameList.value.findIndex((a) => a.si === +si.value)
  // 展示个数小于当前球种在列表中的位置时，保留当前球种，往前减
  if (activeIndex > -1 && ballCount.value <= activeIndex) {
    const activeObj = allSportsNameList.value[activeIndex]
    return [...allSportsNameList.value.slice(0, ballCount.value - 1), activeObj]
  }

  return allSportsNameList.value.slice(0, ballCount.value)
})

const staticList = computed(() => {
  return [
    { name: 'home', path: '/', icon: 'sports-home' },
    { name: 'live', path: '/live', icon: 'uni-live' },
    { name: 'favorites', path: '/favorites', icon: 'uni-fav' },
    { name: 'bets', path: '/bets', icon: 'uni-record' },
  ]
})

// 前往页面
function clickHandler(v: string) {
  isShowAllSportsList.value = false
  if (props.currentPage === v)
    return

  i18nNavigateTo(`/sports?bt-path=${encodeURIComponent(v)}`)
}
// 点击球种
function sportClickHandler(_si: number) {
  if (+si.value === _si)
    return

  nextTick(() => {
    i18nNavigateTo(getSportsRoutePath({ page: '/sport', si: `${_si}` }))
  })
}
function toggleAllSportsList() {
  isShowAllSportsList.value = !isShowAllSportsList.value
}
</script>

<template>
  <div ref="navRef" :style="{ top: headerHeight + 'px' }"
    class="sticky w-full  h-[64px] flex items-center justify-between px-[8px] bg-[var(--color-bg-black-4)]"
    :class="[isShowAllSportsList ? 'z-[102]' : 'z-[98]']">
    <!-- 固定菜单 -->
    <div v-for="nav in staticList" :key="nav.name"
      class="relative box-content w-[32px] h-[32px] p-[8px] flex items-center justify-center cursor-pointer"
      :class="{ 'active-nav': nav.name === currentPage }" @click="clickHandler(nav.path)">
      <div class="text-[32px] flex items-center justify-center ">
        <BaseIcon :name="nav.icon" />
      </div>
    </div>
    <!-- 分割线 -->
    <div class="w-[6px] flex justify-center">
      <div class="w-[1px] h-[32px] bg-[#b3bec1]" />
    </div>
    <!-- 球种分类 -->
    <div v-for="item, ii in showList" :key="item.si" class="flex">
      <div class="relative box-content w-[32px] h-[32px] p-[8px] flex items-center justify-center cursor-pointer"
        @click="sportClickHandler(item.si)">
        <div class="w-[32px] h-[32px] p-[4px] flex items-center justify-center ">
          <BaseImage :url="item.spic" is-network :class="{ 'active-sport': item.si === +si }" />
        </div>
      </div>
      <div v-if="ii === showList.length - 1" @click="toggleAllSportsList"
        class="relative box-content w-[16px] h-[32px] p-[8px] pl-0 flex items-center justify-center cursor-pointer">
        <BaseIcon name="uni-triangle" class="text-[16px]" :class="isShowAllSportsList ? 'rotate-[-180deg]' : ''"
          :style="isShowAllSportsList ? '--tg-base-icon-color:#24ee89b3;' : ''" />
      </div>
    </div>
    <div v-if="ballCount === 0" @click="toggleAllSportsList"
      class="relative box-content w-[16px] h-[32px] p-[8px] pl-0 flex items-center justify-center cursor-pointer">
      <BaseIcon name="uni-triangle" class="text-[16px]" />
    </div>
    <!-- 搜索 -->
    <div class="relative box-content w-[32px] h-[32px] p-[8px] flex items-center justify-center cursor-pointer"
      @click="clickHandler('/search')" :class="{ 'active-nav': 'search' === currentPage }">
      <div class="text-[32px] flex items-center justify-center">
        <BaseIcon name="uni-search" />
      </div>
    </div>
  </div>
</template>

<style lang='scss' scoped>
.active-nav {
  --tg-base-icon-color: #24ee89;
}

.active-sport {
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(36, 238, 137, 0.5);
    /* 加的颜色层 */
    pointer-events: none;
    border-radius: 50%;
  }
}
</style>
